<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 用link将index.css连接起来 -->
    <link rel="stylesheet" href="./index.css">
    <!-- vue框架，引入vue库文件，本地 -->
    <script src="./vue.js"></script>
    <!-- 引入外部js文件 ，将代码分解成多个模块-->
    <script defer type="module" src="./index.js"></script>
    <!-- <script src="./BlockUtil.js"></script> -->

     <!-- 解决 请求 favicon.ico 文件 错误问题-->
    <link rel="icon" type="image/x-icon" href="data:image/x-icon;,">

</head>
<body>
    <!-- vue容器 -->
    <div id="app">
       
        <!-- 游戏区域 -->
        <div class="playfield">
        
            <!-- 音频元素 -->
            <audio id="eliSound" src="./asset/xiaochu.mp3" preload="auto"></audio>
            <audio id="unbelievableSound" src="./asset/unbelievable.mp3" preload="auto"></audio>
            <audio id="actionSound" src="./asset/action.mp3" preload="auto"></audio>
            <!-- 样式类.b0到b7八种不同的样式 -->
             <!-- b0 为透明的-->
              <!-- 外层：使用v-for指令遍历输出游戏区域的200个方块 -->
              <!--遍历 playfieldBlocks 数组，取出其中的每一行数组，并且获取行的索引 ri。  -->
            <template v-for="(row,ri) in playfieldBlocks">
                <!-- 在每一行数组 row 中循环遍历每个元素 -->
                 <!-- 根据 block 的值动态生成类名，类名为 'b' + block -->
                  <!-- 内层：遍历输出行内的小方块 -->
                   <!-- 动态绑定来控制小方块的颜色 -->
                    <!-- clearableLines.includes(ri)呈现闪烁效果 -->
                <div v-for="block in row" class="block" 
                :class="{['b'+block]:true,blink:clearableLines.includes(ri)}">
                </div>
            </template>
            
            <!-- 模本绑定 -->
            <div v-if="isGameOver" class="game-over">
                <h1>GAME OVER</h1>
                <audio id="defectSound" src="./asset/defect.mp3" preload="auto"></audio>
            </div>
            
        </div>

        <!-- 边栏 -->
        <div class="aside">
            <div>
                <!-- 下一个俄罗斯方块 -->
                 <!-- 判断，nextTetris有值时才输出下一个俄罗斯方块 -->
                <div v-if="nextTetris" class="nextTetris">

                    <template v-for="row in nextTetris.blocks">
                        <div v-for="block in row" class="block" :class="{['b'+block]:true}"></div>
        
                    </template>
                </div>

                <!-- 积分与成绩 -->
                 <!-- {{ score }}绑定当前积分的显示值 -->
                 <h2 class="record">Score<span>{{ score }}</span></h2>
                 <!--{{ level }} 绑定当前积分的等级值 -->
                 <h2 class="record">Level<span>{{ level }}</span></h2>

                
            </div>

            <div class="gif-container"><div>

            <div class="gif-container">
                <div class="gif-background"></div>
                        <img src="./asset/person4.gif" alt="动态图" class="gif-image">
                </div>
            <div>

            <!-- 控制按钮区域 -->
            <div class="controls">
                
                <audio id="Sound" src="./asset/quanju.mp3" preload="auto"></audio>
                <!-- 用vue的响应机制来控制界面的呈现 -->
                 <!-- 让视图层和控制层的逻辑分离 -->
                <!-- 开始 -->
                <button v-if="!isStart" @click="start">Start</button>
                <!-- 暂停 -->
                <button v-if="isStart && !isPaused" @click="pause">Pause</button>
                <!-- 恢复 -->
                <button v-if="isPaused" @click="resume">Resume</button>
                <!-- 重新开始 -->
                <button v-if="isStart" @click="start">Restart</button>
            </div>
            

        </div>

    </div>
    
</body>
</html>